<template>
  <el-container>
    <el-header>
      <top-bar></top-bar>
      <!-- <div class="top-nav-bar">
        <span>花卉网：你值得一逛</span>
        <div class="function-bar">
          <div>
            <span>你好，Flipped</span>
            <span @click="loginOut">退出</span>
          </div>
          <div>订单查询</div>
          <div>购物车</div>
        </div>
      </div> -->
      <div class="search-box">
        <div class="search-title">
          <span>Huahui 花卉网</span>
          <span>-花之思 只为你-</span>
        </div>
        <div class="search">
          <el-autocomplete
            v-model="state"
            :fetch-suggestions="querySearchAsync"
            style="width:400px"
            placeholder="商品搜索"
            @select="handleSelect"
          ></el-autocomplete>
          <!-- <el-input v-model="searchInfo" placeholder="商品搜索">
            <template slot="append">搜索</template>
          </el-input> -->
        </div>
      </div>
    </el-header>
    <el-container class="main-container">
      <el-aside width="220px">
        <div v-for="(item,index) in classification" :key="index" class="aside-item">
          <span class="classification-title">{{ item.title }}</span>
          <ul class="classification-span-box">
            <li v-for="(self,num) in item.array" :key="num" class="classification-span" :class="{'choose-color': mutation[index] == num }" @click="choose(item,num)">{{ self }}</li>
          </ul>
        </div>
      </el-aside>
      <el-main>
        <div class="goods-item-box">
          <div v-for="item in goodsList" :key="item.id" class="goods-item" @click="toDetail(item)">
            <el-image
              style="width: 223px;"
              :src="item.pictureUrl[0][1]"
              fit="cover"
            ></el-image>
            <span class="goods-item-title">{{ item.goodsName }}</span>
            <span class="goods-item-price">¥{{ item.price }}</span>
          </div>
        </div>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="12"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import topBar from '../../components/topBar/index.vue'
export default {
  name: 'GoodsList',
  components: {
    topBar
  },
  data() {
    return {
      mutation: [null, null, null, null], // 选中的下标
      searchInfo: '', // 搜索条件,
      goodsList: [
        // { id: 0, imgUrl: 'https://asset.ibanquan.com/image/605f03dbd465a50015e44a59/s_w325h325gn.jpeg', name: '天堂鸟--鹤望兰火焰玫瑰混合花束', price: '529.00' },
        // { id: 1, imgUrl: 'https://asset.ibanquan.com/image/605f0de47ce87300151c36c7/s_w325h325gn.jpeg', name: '天堂鸟--鹤望兰火焰玫瑰混合花束', price: '529.00' },
        // { id: 2, imgUrl: 'https://asset.ibanquan.com/image/605ff638d465a50015e44b3c/s_w325h325gn.jpeg?v=1616901688', name: '天堂鸟--鹤望兰火焰玫瑰混合花束', price: '529.00' },
        // { id: 3, imgUrl: 'https://asset.ibanquan.com/image/605ff8c3d465a50015e44b42/s_w325h325gn.jpeg?v=1616902339', name: '天堂鸟--鹤望兰火焰玫瑰混合花束', price: '529.00' },
        // { id: 4, imgUrl: 'https://asset.ibanquan.com/image/605f01ad7ce87300241c3c43/s_w325h325gn.jpeg?v=1616839085', name: '天堂鸟--鹤望兰火焰玫瑰混合花束', price: '529.00' },
        // { id: 5, imgUrl: 'https://asset.ibanquan.com/image/605f03dbd465a50015e44a59/s_w325h325gn.jpeg', name: '天堂鸟--鹤望兰火焰玫瑰混合花束', price: '529.00' }
      ],
      classification: [
        { title: '用途', id: '0', array: ['爱情鲜花', '友情鲜花', '生日鲜花', '问候长辈', '回报老师', '探病慰问', '道歉鲜花', '婚庆鲜花', '祝贺鲜花', '哀思鲜花', '商务鲜花'] },
        { title: '花材', id: '1', array: ['玫瑰', '红玫瑰', '粉玫瑰', '白玫瑰', '香槟玫瑰', '康乃馨', '百合', '向日葵', '郁金香'] },
        { title: '颜色', id: '2', array: ['红色', '粉色', '紫色', '黄色', '白色'] },
        { title: '价格', id: '3', array: ['特价鲜花', '150元以下', '150-250元', '250-350元', '350-550元', '550-800元', '800元以上'] }
      ],
      state: '',
      timeout: null,
      restaurants: [], // 模糊搜索数据
      total: 0, // 总页数
      page: 1 // 当前页
    }
  },
  computed: {

  },
  created() {
    this.getList()
  },
  methods: {
    handleCurrentChange(val) {
      this.page = val
      this.getList()
    },
    // 选择用途
    choose(item, num) {
      console.log(item)
      console.log(num)
      if (item.id == 1) {
        this.mutation[0] = null
      } else if (item.id == 0) {
        this.mutation[1] = null
      }
      this.mutation[item.id] = num
      this.$forceUpdate()
      this.getList()
    },
    // 获取数据
    async getList() {
      const mutation = this.mutation
      let use = ''
      let color = ''
      let price = ''
      if (mutation[0] !== null) {
        use = this.classification[0].array[mutation[0]]
      }
      if (mutation[1] !== null) {
        use = this.classification[1].array[mutation[1]]
      }
      if (mutation[2] !== null) {
        color = mutation[2]
      }
      if (mutation[2] == null) {
        color = 100
      }
      if (mutation[3] !== null) {
        price = mutation[3]
      }
      if (mutation[3] == null) {
        price = 100
      }
      const page = this.page
      const pageSize = 12
      const { data } = await this.$api.goodsList.queryGoodsByDict({ use: use, color: color, price: price, page: page, pageSize: pageSize })
      this.total = parseInt(data.content.total)
      console.log(data)
      this.goodsList = []
      data.content.list.forEach((item, index) => {
        this.goodsList[index] = item
        this.goodsList[index].pictureUrl = JSON.parse(item.pictureUrl)
      })
    },
    toDetail(item) {
      console.log(item)
      this.$router.push({
        path: '/goodsDetail',
        query: { // 路由传参时push和query搭配使用 ，作用时传递参数
          goodsDetail: JSON.stringify(item)
        }
      })
    },
    // 搜索
    handleSelect(item) {
      this.$router.push({ // 核心语句
        path: '/goodsDetail', // 跳转的路径
        query: { // 路由传参时push和query搭配使用 ，作用时传递参数
          goodsDetail: JSON.stringify(item)
        }
      })
    },
    async querySearchAsync(queryString, cb) {
      const { data } = await this.$api.home.queryGoods({ goodsName: queryString })
      this.restaurants = data.content
      var restaurants = this.restaurants
      restaurants.forEach(item => {
        item.value = item.goodsName
      })
      var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
      }, 2000 * Math.random())
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    }
  }
}
</script>
<style lang="scss">
.el-container{
  width: 100%;
  height: 100%;
  min-width: 1200px;
  .el-header{
    display: flex;
    flex-direction: column;
    padding: 0;
    height: auto !important;
    min-width: 1500px;
    .top-nav-bar{
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #f1f3f6;
      color: #666e73;
      font-size: 12px;
      line-height: 40px;
      padding: 0 25%;
      .function-bar{
          display: flex;
          justify-content: flex-start;
          div{
              margin-right: 50px;
              span{
                  margin-right: 5px;
              }
          }
      }
    }
    .search-box{
      width: 1200px;
      display: flex;
      align-items: center;
      padding:20px 0 20px 0px;
      margin: 0 auto;
      .search-title{
        display: flex;
        flex-direction: column;
        color: #fd684a;
        margin-right: 50px;
        align-items: center;
        span:nth-child(1){
          font-size: 35px;
        }
        span:nth-child(2){
          color: #f8bcae;
          font-size: 18px;
        }
      }
      .search{
        width: 500px;
        ::v-deep .el-input__inner{
        border-color: #fd684a !important;
        }
        ::v-deep  .el-input-group__append{
          background-color: #fd5e40 !important;
          color: white;
          border-color: #fd5e40;
        }
      }
    }
  }
  .main-container{
    width: 1200px;
    margin: 0 auto;
    min-width: 1200px;
    .el-aside{
      border: 1px solid #c5c5c5;
      padding: 10px;
      .aside-item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #d9d9d9;
        padding: 10px 0;
        .classification-title{
          font-family: tahoma, arial, 'Hiragino Sans GB', '\5FAE\8F6F\96C5\9ED1', sans-serif;
          font-size: 14px;
          font-weight: bold;
          margin-right: 10px;
          color: #ff6a00;
        }
        .classification-span-box{
          display: flex;
          justify-content: space-between;
          flex-flow: wrap;
          flex: 1;
          .classification-span{
            list-style-type: none;
            font-size: 12px;
            line-height: 22px;
            width: 50%;
            cursor:pointer;
            &:hover{
              color: #df6a52;
            }
          }
          .choose-color{
            color: #fd6021;
          }
        }
      }
    }
    .el-main{
      min-width: 1200px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .goods-item-box{
        display: flex;
        flex-flow: wrap;
        .goods-item{
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          margin-bottom: 30px;
          margin-right: 20px;
        .el-image{
          margin-bottom: 20px;
        }
        .goods-item-title{
          font-size: 14px;
          height: 22px;
          display: block;
          line-height: 22px;
          color: #222222;
        }
        .goods-item-price{
          height: 22px;
          line-height: 22px;
          color: #006e5e;
        }
      }
      }
      .el-pagination{
        width: 100%;
        text-align: center;
        padding-bottom: 10px;
      }
    }
  }
}
</style>
